<template>
    <n-layout has-sider>
        <n-layout-sider content-style="padding: 2px;" bordered collapse-mode="width" :collapsed-width="64" :width="240"
            :collapsed="collapsed" show-trigger @collapse="collapsed = true" @expand="collapsed = false" class="left">
            <projectMenu />
        </n-layout-sider>
        <n-layout>
            <n-layout-header></n-layout-header>
            <n-layout-content content-style="padding: 2px;">
                <router-view />
            </n-layout-content>
            <n-layout-footer></n-layout-footer>
        </n-layout>
    </n-layout>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import projectMenu from "./components/projectMenu.vue"
import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter } from 'naive-ui'

const collapsed = ref(false)

</script>

<style>
.left{
    height: 100vh;
}
</style>